<template>
	<div id="login">
		<h1>Welcome</h1>
		<div id="box">
			<label for="name">
				手机号：<input type="text" id="username" v-model="username">
			</label>
			<label for="keyword">
				密&emsp;码：
				<input type="password" id="keyword" v-model="passWd"><br/>
				<i class="iconfont icon-yanjing" @click="Invisible" v-if="isVisible"></i>
				<i class="iconfont icon-biyan" @click="Visible" v-else></i>
			</label>
			<button @click="login">登录</button>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import { mapState, mapMutations } from 'vuex'

	export default {
		name:'Login',
		data(){
			return {
				username  :'', //用户名
				isVisible :false,
				telephone :'',//手机号
				passWd    :'',//密码
				oCheckTel :false,
				from      :this.$route.query.from,
			}
		},
		computed: {
			...mapState(['userPhone']),
		},
		methods:{
			...mapMutations([
            	'toApp',
            	'changrTel',
	        ]),
			Visible(){
				let _self=this;
				_self.isVisible=true;
				var pwd4 = document.getElementById("keyword");
				pwd4.type = "text";
			},
			Invisible(){
				let _self=this;
				_self.isVisible=false;
				var pwd4 = document.getElementById("keyword");
				pwd4.type = "password";
			},
			//验证手机号
	        checkTel (val){
	            let _self = this;
	            if(val.length == 11){
	                if(/^1(3|4|5|7|8)\d{9}$/.test(val)){
	                    this.oCheckTel = true;
	                }else{
	                    $('.mobile').addClass('error');
	                    Toast('请输入正确的手机号');
	                    return false;
	                }
	            }else{
	                $('.mobile').addClass('error');
	                Toast('请输入正确的手机号');
	                return false;
	            }
	        },
			login(){
				let _self = this;
				_self.checkTel(_self.username);
				if(!_self.oCheckTel){return false};
				window.localStorage.setItem('loginTel', _self.username);
				window.localStorage.setItem('loginPassWd', _self.passWd);
		  		_self.$_get('loginBinHaiOa', { 
					userPassword :_self.passWd,
					userPhone    :_self.username,
		  		})
		  		.then(function(res) {
		  			if(res.returnText == 'SUCCESS'){
		  				Toast('登录成功');
						_self.changrTel(_self.telephone)
						if(_self.from){
			            	_self.$router.push({name:_self.from})
						}else{
							//这里配置默认跳转页面
			            	_self.$router.push({name:'NoticeManage'})
						}
		  			}else{
		  				Toast(res.returnText)
		  			}
		  		})
			}
			
		},
		mounted(){
			let _self = this;
			let gotoUrl = _self.$route.query.gotoUrl
		    if(gotoUrl){
		        _self.$router.push({ name: gotoUrl });
		    }
		}
	}
</script>

<style lang="less">
	#login{
		width: 100%;
		height: 100%;
		max-width: 10rem;
		position: relative;
		background: #f5f5f5;
		background: url(./images/bg.jpg);
		background-size: 100%;
		h1{
			line-height: 360px;
			font-size: 80px;
			background: linear-gradient(to right, red, white);
	        -webkit-background-clip: text;
	        color: transparent;
		}
		#box{
			display: block;
			width: 560px;
			height: 420px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -330px;
			margin-left: -280px;
			border-radius: 10px;
			box-shadow: 0 0 20px #eee;
			background: rgba(255,255,255,.6);
			padding: 60px 30px;
			box-sizing: border-box;
			label{
				display: block;
				margin: 20px 0 50px 0;
				position: relative;
				width: 100%;
				text-align: left;
				color: #fff;
				input#phone{
					padding:10px;
					box-sizing: border-box;
					border: 1px solid #eee;/*no*/
					height: 60px;
					width:320px;
				}
				input#keyword{
					padding:10px;
					box-sizing: border-box;
					border: 1px solid #eee;/*no*/
					height: 60px;
					width:320px;

				}
				input#username{
					padding:10px;
					box-sizing: border-box;
					border: 1px solid #eee;/*no*/
					height: 60px;
					width:320px;
				}
				i.iconfont{
					display: block;
					position: absolute;
					right: 0px;
					top: 10px;
					color:#333;
				}
			}
			button{
				display: inline-block;
				border-radius: 10px;
				background: #ff8d53;
				width: 180px;
				height: 60px;
				line-height: 50px;
				font-size: 28px;
				color: #fff;
			}
		}
	}
</style>
